<template>
  <div class="page-wrapper">
      <div class="top">
        <TopBar />
      </div>
      <div class="left">
        <NavBar />
      </div>
      <div class="content">

          <h2>数据列表</h2>
          <ul>
            <li v-for="item in items" :key="item._id">{{ item.title }}</li>
            <li v-for="item in items" :key="item._id">{{ item.description }}</li>
            <li v-for="item in items" :key="item._id">{{ item.image }}</li>
          </ul>


      </div>
    </div>
  </template>

  <script setup>
  import NavBar from '../components/NavBar.vue'
  import TopBar from '../components/TopBar.vue'
  import { ref, onMounted } from 'vue';

const items = ref([]);
const clubs = ref([]);
const qhdx = ref([]);
const schoolId = ref('6770015d07cc577b3926b7a3');

async function fetchData() {
  try {
    const postsresponse = await fetch('http://localhost:5000/posts');
    console.log('postsresponse',postsresponse);
    if (!postsresponse.ok) {
      throw new Error('Network response was not ok');
    }
    items.value = await postsresponse.json();
    console.log('items',items.value);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}
async function fetchClubs() {
  try {
    const clubsresponse = await fetch('http://localhost:5000/clubs');
    console.log('clubsresponse',clubsresponse);
    if (!clubsresponse.ok) {
      throw new Error('Network response was not ok');
    }
    clubs.value = await clubsresponse.json();
    console.log('clubs',clubs.value);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}
//根据学校id获取社团
async function fetchClubsBySchoolId(schoolId) {
  try {
    const clubsresponse = await fetch(`http://localhost:5000/clubs/6770015d07cc577b3926b7a3`);
    console.log('clubsresponse',clubsresponse);
    if (!clubsresponse.ok) {
      throw new Error('Network response was not ok');
    }
    qhdx.value = await clubsresponse.json();
    console.log('清华大学社团',qhdx.value);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

onMounted(() => {
  fetchData();
  fetchClubs();
  fetchClubsBySchoolId(schoolId);
});

  </script>

  <style>
  .page-wrapper {
    display: flex;
    flex-direction: row;
    margin-top: 60px; /* TopBar 的高度，避免内容被遮挡 */
  }
  .content {
    position: absolute; /* 绝对定位 */
    top: 60px; /* 距离顶部的距离等于顶部区域的高度 */
    left: 200px; /* 距离左侧的距离等于左侧区域的宽度 */
    right: 0; /* 距离右侧为0，撑满剩余空间 */
    bottom: 0; /* 距离底部为0，撑满剩余空间 */

    padding: 10px; /* 为内容添加内边距 */
  }
  .publish-container {
    padding: 20px;
  }
  input, textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #0056b3;
  }
  </style>